<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <link rel="stylesheet" th:href="@{/static/css/style.css}">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"/>
    <style>
        .pro_name a {
            color: #4183c4;
        }

        .osc_git_title {
            background-color: #fff;
        }

        .osc_git_box {
            background-color: #fff;
        }

        .osc_git_box {
            border-color: #E3E9ED;
        }

        .osc_git_info {
            color: #666;
        }

        .osc_git_main a {
            color: #9B9B9B;
        }

        .slider-item {
            height: 41px !important;
        }

        .slider-btn {
            height: 39px !important;
        }
    </style>
    <title>统 一 登 录 工 作 门 户</title>
</head>
<body>
<img alt="" class="wave" th:src="@{/static/img/bg.png}">
<div class="error" th:if="${param.error != null}">用户名或密码错误！</div>
<div class="error" th:if="${param.error != null}" th:text="${param.error}">用户名或密码错误！</div>
<div class="container">
    <div class="img">
        <img alt="" th:src="@{/static/img/undraw_Dashboard_re_3b76.svg}">
    </div>
    <div class="login-box">
        <form class="form-horizontal" method="post" name="f" role="form"
              th:action="${#httpServletRequest.getContextPath()}+'/login'">
            <img alt="" class="avatar" th:src="@{/static/img/avatar.svg}">
            <h2>统 一 登 录 工 作 门 户</h2>
            <h3>Hi~欢迎登录</h3>
            <div th:if="${param.logout != null}">
                <p>
                    您已注销。
                </p>
            </div>
            <div class="input-group">
                <div class="icon">
                    <i class="fa fa-user"></i>
                </div>
                <div>
                    <h5>用户名</h5>
                    <input class="input" id="name" name="username" type="text">
                </div>
            </div>
            <div class="input-group">
                <div class="icon">
                    <i class="fa fa-lock"></i>
                </div>
                <div>
                    <h5>密码</h5>
                    <input class="input" id="password" name="password" type="password">
                </div>
            </div>
            <div id="slider"></div>
            <input name="${_csrf.parameterName}"
                   type="hidden"
                   value="${_csrf.token}"/>
            <a href="#">请不要在陌生的网络环境登录！</a>
            <input class="btn" lay-filter="formDemo" lay-submit name="submit" type="submit"
                   value="提交">
        </form>
    </div>
</div>
<a class="copyright" target="_blank">&copy; Ramostear</a>
<script th:src="@{/static/js/app.js}" type="text/javascript"></script>
<script th:src="@{/static/js/jquery.js}" type="text/javascript"></script>
</body>
<script charset="utf-8" th:src="@{/static/layui/layui.js}" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
    layui.config({
        base: '/small-service-auth/static/js/'
    }).use(['sliderVerify', 'jquery', 'form'], function () {
        var sliderVerify = layui.sliderVerify,
            $ = layui.jquery,
            form = layui.form;
        var slider = sliderVerify.render({
            elem: '#slider',
            onOk: function () {//当验证通过回调
                let pwd = document.getElementById("password");
                pwd.value = window.btoa(pwd.value)
            }
        })
        $('#reset').on('click', function () {
            slider.reset();
        })
        //监听提交
        form.on('submit(formDemo)', function (data) {
            if (slider.isOk()) {
                return true;
            } else {
                layer.msg("请先通过滑块验证");
            }
            return false;
        });

    })
</script>
</html>
